<template>
    <div>
        <div class="main-top" id="home">
            <!-- header -->
            <header>
                <div class="container-fluid">
                    <div class="header d-md-flex justify-content-between align-items-center py-3 px-xl-5 px-lg-3 px-2">
                    </div>
                </div>
            </header>
            <!-- //header -->

            <!-- banner -->
            <div class="banner_w3lspvt">
                <div class="csslider infinity" id="slider1">
                    <input type="radio" name="slides" checked="checked" id="slides_1" />
                    <input type="radio" name="slides" id="slides_2" />
                    <input type="radio" name="slides" id="slides_3" />
                    <input type="radio" name="slides" id="slides_4" />
                    <ul class="banner_slide_bg">
                        <li>
                            <div class="container">
                                <div class="w3ls_banner_txt">
                                    <p> Welcome to us!</p>
                                    <h3 class="w3ls_pvt-title text-wh text-uppercase let"> Bed and Breakfast</h3>
                                    <p style="margin-top: 7px"> 欢迎光临bnb民宿</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="container">
                                <div class="w3ls_banner_txt">
                                    <p>Welcome to us!</p>
                                    <h3 class="w3ls_pvt-title text-wh text-uppercase let">Qing</h3>
                                    <h3 class="w3ls_pvt-title text-wh text-uppercase let">Dao</h3>
                                    <p style="margin-top: 7px">位于中国山东省青岛市</p>
                                    <p style="margin-top: 7px">背靠崂山，窗外海边，实现依山傍海</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="container">
                                <div class="w3ls_banner_txt">
                                    <p>Welcome to us!</p>
                                    <h3 class="w3ls_pvt-title text-wh text-uppercase let">Da</h3>
                                    <h3 class="w3ls_pvt-title text-wh text-uppercase let">Lian</h3>
                                    <p style="margin-top: 7px">位于中国辽宁省南部</p>
                                    <p style="margin-top: 7px">优美海岸线，温和气候，多彩风景</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="container">
                                <div class="w3ls_banner_txt">
                                    <p>Welcome to us!</p>
                                    <h3 class="w3ls_pvt-title text-wh text-uppercase let">San</h3>
                                    <h3 class="w3ls_pvt-title text-wh text-uppercase let">Ya</h3>
                                    <p style="margin-top: 7px">位于中国海南省三亚市</p>
                                    <p style="margin-top: 7px">东方夏威夷，热门旅游景点</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div class="arrows">
                        <label for="slides_1"></label>
                        <label for="slides_2"></label>
                        <label for="slides_3"></label>
                        <label for="slides_4"></label>
                    </div>
                </div>
            </div>

        </div>

        <!-- banner bottom -->
        <div class="banner-bottom py-5">
            <div class="d-md-flex container py-xl-3 py-lg-3">
                <div class="banner-left-bottom-w3ls">
                    <h6 class="text-wh let">Welcome!!!</h6>
                    <h3 class="text-wh my-3">欢迎光临 B&B</h3>
                    <p>傍海而居,我们bnb是一家诞生在临海地区的民宿品牌。</p>
                    <p>我们把门店开在依山傍海的大连、东方瑞士的青岛、热门景点的三亚...我们还会有更多的版图，坚信民宿的选址是一种力量。</p>
                </div>
            </div>
        </div>


        <div class="rooms-w3ls bg-li py-5" id="price">
            <div class="container-fluid py-xl-5 py-lg-3">
                <h3 class="tittle text-center text-bl font-weight-bold">民宿信息</h3>
                <p class="sub-tittle text-center mt-2 mb-sm-5 mb-4 pb-xl-3">截止目前 我们有三家连锁民宿。我们还有更多惊喜等您探索</p>
                <div class="row" >
                    <div class="col-lg-4 price-mobamus" v-for="item in hotelData">
                        <div class="price-top">
                            <a >
                                <img :src="visitPath+item.avatar" alt="" class="img-fluid">
                            </a>
                        </div>
                        <div class="price-w3ls-bottom p-4">
                            <h4 class="my-2"><a >{{item.location}}</a></h4>
                            <div class="lm-item-price">
                                <h6>
                                    <span class="price-top-head">¥</span>
                                    <span class="price-midd-head">{{item.price}}</span>
                                    <span class="price-right-head">/ 每晚起</span>
                                </h6>
                            </div>
                            <ul class="style-lists" >
                                <li v-for="item2 in item.describeList">{{item2.title}}</li>
                            </ul>
                            <a  class="btn button-style-2 mt-sm-5 mt-4" @click="navToDetail(item.id)">立即预订</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="stats py-5">
            <div class="container py-xl-5 py-lg-3">
                <div class="row stats-mobamu py-5">
                    <div class="col-lg-4 col-md-6">
                        <div class="stats-grid">
                            <div class="row">
                                <div class="col-4 text-center">
                                    <span class="fa fa-star"></span>
                                </div>
                                <div class="col-8">
                                    <h4 class="numscroller">999+</h4>
                                    <p>上千+好评</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 mt-md-0 mt-4">
                        <div class="stats-grid">
                            <div class="row">
                                <div class="col-4 text-center">
                                    <span class="fa fa-smile-o"></span>
                                </div>
                                <div class="col-8">
                                    <h4 class="numscroller">999+</h4>
                                    <p>每年有上万顾客光临</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 mx-lg-0 mx-md-auto mt-lg-0 mt-4">
                        <div class="stats-grid">
                            <div class="row">
                                <div class="col-4 text-center">
                                    <span class="fa fa-cutlery"></span>
                                </div>
                                <div class="col-8">
                                    <h4 class="numscroller">99+</h4>
                                    <p>各种特色佳肴</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="serives py-5" id="why">
            <div class="container py-xl-5 py-lg-3">
                <h3 class="tittle text-center text-bl font-weight-bold">为什么选择我们 </h3>
                <p class="sub-tittle text-center mt-2 mb-sm-5 mb-4 pb-xl-3">why choose us?</p>
                <div class="row text-center">
                    <div class="col-lg-3 col-md-6 ser-grid">
                        <span class="fa fa-cutlery"></span>
                        <h4>特色精致美食</h4>
                        <p>根据当地特色菜品，采购新鲜食材，为您带来口味独特、新鲜美味的当地特色菜肴</p>
                    </div>
                    <div class="col-lg-3 col-md-6 ser-grid mt-md-0 mt-5">
                        <span class="fa fa-money"></span>
                        <h4>更实惠的价格</h4>
                        <p>连锁品牌民宿，优惠力度大，更加经济实惠</p>
                    </div>
                    <div class="col-lg-3 col-md-6 ser-grid mt-lg-0 mt-5">
                        <span class="fa fa-user-secret"></span>
                        <h4>绝佳风景位置</h4>
                        <p>民宿的选址经过了层层考察，以保您来能尽情享受壮丽海景</p>
                    </div>
                    <div class="col-lg-3 col-md-6 ser-grid mt-lg-0 mt-5">
                        <span class="fa fa-car"></span>
                        <h4>服务一条龙</h4>
                        <p>如果您有接送需求，可以提前致电，我们将接您回家</p>
                    </div>
                </div>
            </div>
        </div>





        <!-- services -->
        <div class="serives-mobamu py-5" id="services">
            <div class="container py-xl-5 py-lg-3">
                <h3 class="tittle text-center text-wh font-weight-bold">我们的服务</h3>
                <p class="sub-tittle text-center text-li mt-2 mb-sm-5 mb-4 pb-xl-3">our service</p>
                <div class="row welcome-bottom text-center">
                    <div class="col-lg-3 col-sm-6 px-2">
                        <div class="welcome-grid bg-wh py-5 px-4">
                            <img src="../../assets/h/images/wh1.jpg" alt="" class="img-fluid">
                            <h4 class="mt-4 mb-3 text-bl">个性化定制服务</h4>
                            <p>我们尽心为您提供贴心个性化服务，包括行程安排、餐饮偏好等方面的定制，确保您的需求都得到满足。</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6 mt-sm-0 mt-5 px-2">
                        <div class="welcome-grid bg-wh py-5 px-4">
                            <img src="../../assets/h/images/wh2.jpg" alt="" class="img-fluid">
                            <h4 class="mt-4 mb-3 text-bl">独特的住宿体验</h4>
                            <p>我们致力于为您提供独一无二的住宿体验。每间客房都经过精心设计和布置，让您感受到家外之家的温馨舒适。</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6 mt-lg-0 mt-5 px-2">
                        <div class="welcome-grid bg-wh py-5 px-4">
                            <img src="../../assets/h/images/wh3.jpg" alt="" class="img-fluid">
                            <h4 class="mt-4 mb-3 text-bl">丰富的休闲设施</h4>
                            <p>根据当地特色，我们将提供不同的休闲放松设施，例如海滨活动、沙滩活动和户外运动，让您在度假期间尽情享受</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6 mt-lg-0 mt-5 px-2">
                        <div class="welcome-grid bg-wh py-5 px-4">
                            <img src="../../assets/h/images/wh4.jpg" alt="" class="img-fluid">
                            <h4 class="mt-4 mb-3 text-bl">正规民宿连锁</h4>
                            <p>有营业执照 全国知名品牌民宿 放心入住。在这里你可以发现别样的风景，留下属于自己的美好回忆</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="middle py-5">
            <div class="container py-xl-5 py-lg-3">
                <div class="welcome-left text-center py-md-5 py-3">
                    <h3>喜欢您来</h3>
                <h3>我们在这等待您的光临！</h3>
                </div>
            </div>
        </div>


        <!-- footer -->
        <footer class="py-5">
            <div class="container pt-xl-4">
                <div class="row footer-top">
                    <div class="col-lg-4 col-md-6 footer-grid_section_1its">
                        <h2 class="logo-2 mb-lg-4 mb-3">
                            <a href="index.html" class="text-uppercase text-wh">B&B</a>
                        </h2>
                        <div class="map-fo">
                            <iframe src=""></iframe>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-6 footer-grid_section_1its mt-md-0 mt-4">
                        <h3 class="footer-title text-uppercase text-wh mb-lg-4 mb-3">链接</h3>
                        <ul class="list-unstyled" style="color:white">
                            <li class="mb-3">
                                <a @click="goToPage('/front/Book')">首页</a>
                            </li>
                            <li class="mb-3">
                                <a href="about.html">About Us</a>
                            </li>
                            <li class="mb-3">
                                <a href="gallery.html">Gallery</a>
                            </li>
                            <li class="mb-3">
                                <a href="#services">Services</a>
                            </li>
                            <li class="mb-3">
                                <a href="contact.html">Contact Us</a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-3 col-md-6 footer-grid_section_1its mt-lg-0 mt-4">
                        <h3 class="footer-title text-uppercase text-wh mb-lg-4 mb-3">联系方式</h3>
                        <div class="contact-info">
                            <div class="footer-style-w3ls mb-4">
                                <h4 class="text-li mb-2">联系电话</h4>
                                <p>总电话123 4567 8990</p>
                            </div>
                            <div class="footer-style-w3ls mb-4">
                                <h4 class="text-li mb-2">Email </h4>
                                <p><a>1234@example.com</a></p>
                            </div>
                            <div class="footer-style-w3ls mb-4">
                                <h4 class="text-li mb-2">地点</h4>
                                <p>青岛 大连 三亚...</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 footer-grid_section_1its mt-lg-0 mt-4">
                        <div class="mobamuinfo_social_icons">
                            <h3 class="footer-title text-uppercase text-wh mb-lg-4 mb-3">关于我们</h3>
                            <p>傍海而居,我们bnb是一家诞生在临海地区的民宿品牌</p>
                            <h4 class="sub-con-fo text-li my-4">社交媒体</h4>
                            <ul class="mobamuits_social_list list-unstyled">
                                <li class="w3_mobamu_facebook">
                                    <a href="#">
                                        <span class="fa fa-facebook-f"></span>
                                    </a>
                                </li>
                                <li class="w3_mobamu_twitter">
                                    <a href="#">
                                        <span class="fa fa-twitter"></span>
                                    </a>
                                </li>
                                <li class="w3_mobamu_dribble">
                                    <a href="#">
                                        <span class="fa fa-dribbble"></span>
                                    </a>
                                </li>
                                <li class="w3_mobamu_google">
                                    <a href="#">
                                        <span class="fa fa-google-plus"></span>
                                    </a>
                                </li>
                            </ul>
                        </div>

                    </div>
                </div>
            </div>
        </footer>


        <a href="#home" class="move-top text-center"></a>

    </div>
</template>

<script>

import {visitPath} from "../../Interface/FileApi";
import {queryHotelPage} from "@/Interface/HotelApi";
import {backLogin} from "@/Config/Tool";

export default {
    data() {
        return {
            visitPath:visitPath,
            hotelData: [],
            limit:1000,
            page:1,
            param:{}
        };
    },
    mounted() {
        backLogin("USER")
        this.queryHotelPageFun();
    },
    methods: {

        goToPage(route) {
            this.$router.push(route);
        },
        navToDetail(id) {
            this.$router.push({ path: '/front/hotel', query: { id: id } });
        },

      /**--------------------------------查询调用接口---------------------------------*/
      /**
       * 查询数据
       */
      queryHotelPageFun(){
        queryHotelPage({
          page:1,
          limit:100,
          param:{}
        }).then((res)=>{
          if (res.code===200){
            this.hotelData = res.data.records;
          }else {
            this.$message.error(res.msg)
          }
        })
      }
    },

}



</script>

<style>
@import url('../../assets/h/css/font-awesome.min.css');
@import url('../../assets/h/css/bootstrap.css');
@import url('../../assets/h/css/css_slider.css');
@import url('../../assets/h/css/style.css');
</style>
